<template>
    <div class="container">
        <mt-header title="我的优惠券">
            <router-link to="/" slot="left">
                <mt-button icon="back"></mt-button>
            </router-link>
        </mt-header>
        <div class="coupon" v-for="(item,index) in data" :key="index">
            <div class="coupon__details">
                <div class="coupon__value">减免{{item.amount}}元</div>
                <div class="coupon__info">
                    <div class="coupon__expiry">有效期至：{{item.validDate}}</div>
                    <div class="coupon__claimed">领取时间：{{item.chargeTime}}</div>
                    <div class="coupon__status">可用状态： <span class="coupon__status--valid">{{item.canUse}}</span></div>
                    <div class="coupon__usage-details">使用情况： <span class="coupon__usage-details--unused">{{item.used}}</span>
                    </div>
                </div>
            </div>

        </div>

    </div>
</template>

<script>
export default {
    data() {
        return {
            data: []
        }
    },
    methods: {
        getCouponList2() {
            this.$axios({
                url: this.$api.userCoupon,
                method: 'get',
                headers: {
                    'Content-Type': 'multipart/form-data'
                },

            }).then(res => {
                console.log(res);
                this.data = res.rows
            })
        }
    },
    mounted() {
        this.getCouponList2()
    }
}
</script>

<style lang="scss" scoped>
.coupon {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 20px;
  background-color: #f9f9f9;
}

.coupon__details {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.coupon__value {
  font-size: 24px;
  font-weight: bold;
}

.coupon__info {
  display: flex;
  flex-direction: column;
  text-align: right;
}

.coupon__expiry, .coupon__claimed, .coupon__usage {
  font-size: 14px;
  color: #777;
}

.coupon__status--valid {
  color: green;
}

.coupon__status--invalid {
  color: red;
}

.coupon__usage-details--unused {
  color: green;
}

.coupon__usage-details--used {
  color: red;
}

.coupon__terms {
  margin-top: 20px;
  font-size: 14px;
  color: #777;
}

.coupon__terms--value {
  margin-bottom: 5px;
}

.coupon__terms--limit {
  margin-top: 5px;
}

</style>